<template>
  <el-card>
    <el-form>
      <el-form-item>
        <el-input disabled :value="$route.query.roleName"></el-input>
      </el-form-item>
      <el-form-item label="权限管理">
        <el-tree
          :data="permissionList"
          :props="{
            label: 'name',
            children: 'children',
          }"
          show-checkbox
          class="role-auth__tree"
          default-expand-all
          ref="treeRef"
          node-key="id" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="assignRolePermissionList">
          保存
        </el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "RoteAuth",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  getRolePermissionListApi,
  assignRolePermissionListApi,
} from "@/api/acl/role";
import type { PermissionList } from "@/api/acl/model/roleModel";
import { ElMessage } from "element-plus";

const permissionList = ref<PermissionList>([]);
const treeRef = ref();
const route = useRoute();

onMounted(async () => {
  const res = await getRolePermissionListApi(route.query.id as string);
  permissionList.value = res.children;
  const checkedKeys = getCheckedKeys(res.children);
  treeRef.value.setCheckedKeys(checkedKeys);
});

const getCheckedKeys = (permissionList: PermissionList) => {
  let checkedKeys: string[] = [];

  permissionList.forEach((permission) => {
    if (permission.children.length) {
      const newCheckedKeys = getCheckedKeys(permission.children);
      checkedKeys = [...checkedKeys, ...newCheckedKeys];
    } else if (permission.select) {
      checkedKeys.push(permission.id);
    }
  });
  return checkedKeys;
};

const assignRolePermissionList = async () => {
  const permissionList = [
    ...treeRef.value.getCheckedKeys(), // 选中的
    ...treeRef.value.getHalfCheckedKeys(), // 半选的
  ];
  console.log(permissionList);
  await assignRolePermissionListApi(route.query.id as string, permissionList);
  ElMessage.success("修改权限成功");
  cancel();
};

const router = useRouter();
const cancel = () => {
  router.push({
    name: "Role",
  });
};
</script>

<style scoped>
.role-auth__tree {
  width: 100%;
  text-align: left;
}
</style>
